import React from 'react'
// import {Header} from './Component/Header'
// import {Section} from './Component/Section'
// import {Footer} from './Component/Footer'

// import {NewAxios} from './Component/newAxios'

// github 搜索案例
// import GithubSearch from "./Component/GithubSearch";

// import GithubSearch_PunSub from './Component/GithubSearch_PunSub'

//引入 containers 里的 Count 组件
import Count from './containers/Count'


import './App.css';

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            todoList: [
                {id: '1', name: 'aaaa', done: true},
                {id: '2', name: 'bbbb', done: false},
                {id: '3', name: 'cccc', done: false},
            ]
        }
    }

    //添加数据
    addList = (todoObj) => {

        const newTodoList = [todoObj, ...this.state.todoList]
        console.log(newTodoList)
        this.setState({todoList: newTodoList})
    }
    //修改状态
    changeTodo = (id, done) => {
        console.log(id, done)
        const {todoList} = this.state
        const newTodoList = todoList.map(item => {
            if (item.id === id) return {...item, done}
            else return item
        })
        this.setState({todoList: newTodoList})
    }
    //删除数据
    deleteTodo = (id) => {
        console.log(id)
        const {todoList} = this.state
        const newTodoList = todoList.filter(item => item.id !== id)
        this.setState({todoList: newTodoList})
    }
    //全选
    checkAllTodo = (done) => {
        console.log(done)
      const {todoList} = this.state
      const newTodoList = todoList.map(item => {
          return {...item,done}
      })
      this.setState({todoList:newTodoList})
    }
   // 清楚已完成数据
   clearAllDone = () => {
     const {todoList} = this.state
     const newTodoList = todoList.filter(item => !item.done)
       // console.log(newTodoList)
     this.setState({todoList:newTodoList})
   }
    render() {
        // console.log(this.state.todoList)
        return (
            <div className="App">
                {/*<div className="App_box">*/}
                {/*    <Header addList={this.addList}></Header>*/}
                {/*    <Section deleteTodo={this.deleteTodo} changeTodo={this.changeTodo}*/}
                {/*             todoList={this.state.todoList}></Section>*/}
                {/*    <Footer clearAllDone = {this.clearAllDone} checkAllTodo = {this.checkAllTodo} todoList={this.state.todoList}></Footer>*/}
                {/*</div>*/}

                {/*  跨域 axios   */}
                {/*<NewAxios></NewAxios>*/}

                {/*<GithubSearch></GithubSearch>*/}
                {/*<GithubSearch_PunSub></GithubSearch_PunSub>*/}

                <Count></Count>
            </div>
        );
    }
}

export default App;
